<!DOCTYPE html>
<html>
    <head>
        <style>
            a:nth-of-type(1){
                border: 2px solid rgb(185, 185, 185);
                border-radius:0.5em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
            }

            a:nth-of-type(1):hover{
                background-color: rgb(185, 185, 185);
            }

            a:nth-of-type(1):active{
                background-color: rgb(124, 124, 124);
            }

            a:nth-of-type(2){
                border: 2px solid rgb(248, 117, 117);
                border-radius:0.5em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
                color: white;
                background-color: rgb(248, 117, 117);
            }

            a:nth-of-type(2):hover{
                background-color: rgb(255, 71, 71);
            }

            a:nth-of-type(2):active{
                background-color: rgb(251, 5, 5);
            }

            a:nth-of-type(3){
                border: 2px solid rgb(108, 181, 250);
                border-radius:0.5em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
                color: white;
                background-color: rgb(108, 181, 250);
            }

            a:nth-of-type(3):hover{
                background-color: rgb(64, 163, 255);
            }

            a:nth-of-type(3):active{
                background-color: rgb(0, 132, 255);
            }

            a:nth-of-type(4){
                border: 2px solid rgb(50, 139, 50);
                border-radius:0.5em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
                color: rgb(50, 139, 50);

            }

            a:nth-of-type(4):hover{
                background-color: rgb(40, 194, 40);
                color: white;
            }

            a:nth-of-type(4):active{
                background-color: rgb(4, 251, 4);
                color: white;
            }

            a:nth-of-type(5){
                border: 2px solid rgb(250, 250, 126);
                border-radius:0.5em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
                color: rgb(250, 250, 126);

            }

            a:nth-of-type(5):hover{
                background-color: rgb(250, 250, 70);
                color: white;
            }

            a:nth-of-type(5):active{
                background-color: rgb(250, 250, 2);
                color: white;
            }

            a:nth-of-type(6){
                border: 2px solid rgb(125, 255, 125);
                border-radius:2em;
                padding: 1em 2em;
                margin: 2em;
                font-weight: bold;
                cursor: pointer;
                color: white;
                background-color: rgb(125, 255, 125);

            }

            a:nth-of-type(6):hover{
                background-color: rgb(72, 255, 72);
                color: white;
            }

            a:nth-of-type(6):active{
                background-color: rgb(0, 250, 0);
                color: white;
            }
        </style>
    </head>
    <body>
        <p>pp</p>
        <a>Default</a>
        <a>Danger</a>
        <a>Success</a>
        <a>Info</a>
        <a>Warning</a>
        <a>Primary</a>
    </body>
</html>